import { Component, OnInit, ViewChild } from '@angular/core';
import { TemplateRef } from "@angular/core";
import { NzMessageService } from 'ng-zorro-antd/message';
import { Step } from '../../../../components/steps/steps.interfaces';

@Component({
  selector: 'app-steps',
  templateUrl: './steps.component.html',
  styleUrls: ['./steps.component.scss']
})
export class StepsComponent implements OnInit {

  @ViewChild('title2', { static: true }) title2!: TemplateRef<void>;

  steps: Step[] = [];
  current = 1;
  startIndex = 1;
  get preDisabled() {
    return this.current <= this.startIndex ? true : false;
  }

  get nextDisabled() {
    return this.current >= this.startIndex + this.steps.length - 1 ? true : false;
  }

  stepChange(step: number) {
    this.current = step;
    this.messageService.success(`${step}`);
  }
  constructor(
    private messageService: NzMessageService,
  ) { }

  ngOnInit() {
    this.steps = [
      { title: 'step1', tooltip: '111111' },
      { title: this.title2, tooltip: '222222' },
      { title: 'step3', tooltip: '333333', disabled: (current: number) => current < 2 },
      { title: 'step4', tooltip: '444444', disabled: (current: number) => current < 3 },
    ];
  }

}
